// 获取浏览器可视区域宽和高
var w,
    h;
$(window).resize(function(){
  w = window.innerWidth;
  h = window.innerHeight;
  // console.log(window.innerWidth,window.innerHeight);
  var home_page = $(".home_page"),
      second_sheet = $(".second_sheet");
  home_page.css({
    "width":window.innerWidth,
    "height":window.innerHeight - 18
  });
  second_sheet.css({
    "width":window.innerWidth + 414,
    "height":window.innerHeight - 18
  })
  $(".second_sheet .arts").css({
    "width":window.innerWidth - 300
  })
})
$(window).resize();



// 出售五件作品
$(".left .name img").on("mouseover",function(){
  $(".chushou").stop().fadeIn(200);
}).on("mouseout",function(){
  $(".chushou").stop().fadeOut(200);
})

//  滚动事件
$(window).on("wheel",function(e){
  var flag = e.originalEvent.deltaY;
  if(flag > 0){                                   // 鼠标滚轮向下滚动
    if($(".home_page").css("width") != "300px"){  // 首页宽不等于300px时
      $(".left").stop().animate({"width":"300px"},500);
      $(".right").stop().animate({"width":"0"},500);
      $(this).stop().fadeOut(500);
      $(".left .nav").stop().fadeOut(1);
      $(".home_page").stop().animate({"width":"300px"});
      $(".home_page").css({
        "position":"fixed",
        "top":"0",
        "left":"0"
      })
      $(".second_sheet").css({
        "display":"block",
        "top":"0",
        "left":"0"
      })
    }else{                                         // 首页宽等于300px时 
      $("html").scrollLeft($("html").scrollLeft() + 100);
      var left = $(".Li_arts_box").css("left"),
          left1 = $("html").scrollLeft();
      // console.log(left1,left);
      if(left1 == 714){
        switch(left){
          case "0px":
            $(".Li_arts_box").stop().animate({"left":-800 + "px"},400);
            break;
          case "-800px":
            $(".Li_arts_box").stop().animate({"left":-800*2 + "px"},400);
            break;
          case "-1600px":
            $(".Li_arts_box").stop().animate({"left":-800*3 + "px"},400);
            break;
          case "-2400px":
            $(".Li_arts_box").stop().animate({"left":-800*4 + "px"},400);
            break;
          case "-3200px":
            $(".Li_arts_box").stop().animate({"left":-800*5 + "px"},400);
            break;
        }
      }
    }
  }else{                                             // 鼠标滚轮向上滚动
    var left = $(".Li_arts_box").css("left"),
        left1 = $("html").scrollLeft();
    if(left1 == 714){
      switch(left){
        case "-4000px":
          $(".Li_arts_box").stop().animate({"left":-800*4 + "px"},400);
          break;
        case "-3200px":
          $(".Li_arts_box").stop().animate({"left":-800*3 + "px"},400);
          break;
        case "-2400px":
          $(".Li_arts_box").stop().animate({"left":-800*2 + "px"},400);
          break;
        case "-1600px":
          $(".Li_arts_box").stop().animate({"left":-800 + "px"},400);
          break;
        case "-800px":
          $(".Li_arts_box").stop().animate({"left":0 + "px"},400);
          break;
      }
      if(left == "0px"){
        $("html").scrollLeft($("html").scrollLeft() - 100);
      }
    }else{
      var left1 = $("html").scrollLeft();
      // console.log(left1);
      $("html").scrollLeft($("html").scrollLeft() - 100);
      if(left1 == 0){     // 首页宽等于300px时
        $("html").scrollLeft($("html").scrollLeft() - 100);
        if($("html").scrollLeft() <= 0){
          $(".left").stop().animate({"width":"50%"},500);
          $(".right").stop().animate({"width":"50%"},500);
          $(".right .turn_right").stop().fadeIn(500);
          $(".left .nav").stop().fadeIn(1000);
          $(".home_page").stop().animate({"width":"100%"});
          $(".second_sheet").css({
            "display":"none"
          })
        }
      }
    } 
  }
})

// 点击事件
var turn_right = $(".right .turn_right");
turn_right.on("click",function(){
  $(".left").stop().animate({"width":"300px"},500);
  $(".right").stop().animate({"width":"0"},500);
  $(this).stop().fadeOut(500);
  $(".left .nav").stop().fadeOut(500);
  $(".home_page").stop().animate({"width":"300px"});
  $(".second_sheet").css({
    "display":"block"
  })
})

var turn_homepage = $(".left");
turn_homepage.on("click",function(){
  console.log($(this).css("width"))
  if($(this).css("width") == "300px"){
    $(".left").stop().animate({"width":"50%"},500);
    $(".right").stop().animate({"width":"50%"},500);
    $(".right .turn_right").stop().fadeIn(500);
    $(".left .nav").stop().fadeIn(500);
    $(".home_page").stop().animate({"width":"100%"});
    $(".second_sheet").css({
      "display":"none"
    })
  }
})

// 显示/隐藏价格
var prize_btn = $(".prize_btn");
prize_btn.on("click",function(){
  if($(this).text() == "显示价格"){
    $(".art_info .prize p").css({
      "display":"block"
    })
    $(this).text("隐藏价格");
  }else{
    $(".art_info .prize p").css({
      "display":"none"
    })
    $(this).text("显示价格");
  }
})

// 作品集
console.log(art_data.LiLongfei_art)
var arts = art_data.LiLongfei_art;
$(".Li_arts_box").css({
  "width":800*arts.length + "px"
})
console.log($(".Li_arts_box").css("width"));
for(var i = 0;i < arts.length;i++){
  var name = arts[i].art_name,
      time = arts[i].art_year,
      genre = arts[i].art_genre,
      size = arts[i].art_size,
      prize = arts[i].art_price,
      site = arts[i].art_site;
  var art = (`<div class="art">
              <img src="${site}" alt="">
              <div class="art_info">
                <div class="name">${name}</div>
                <div class="info">
                  <p class="found">创作时间：<span>${time}</span></p>
                  <p class="mate">材料：<span>${genre}</span></p>
                  <p class="size">尺寸：<span>${size}</span>cm</p>
                </div>
                <div class="prize"><p><span>${prize}</span></p></div>
                <div class="share">
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  
                </div>
              </div>
            </div>`);
  $(".Li_arts_box").append(art);
}